<template>
    <div class="lou">
        <div class="lou-t">
            <img :src="publicUrl('/img/title.png')" />
        </div>
        <div class="lou-l">
            <NuxtLink :to="`https://m.haofangtiao.cn/zs/loupan/detail/${p.id}`" v-for="(p) in list" :key="p.id">
                <div class="l-item">
                    <div class="lou-header">
                        <div class="h-l">
                            <span>{{ transl(p.name) }}</span>
                            <img :src="publicUrl('/img/hot.png')" />
                        </div>
                        <div class="h-r">
                            <div class="r-address">
                                <span>{{ transl(p.address) }}</span>
                                <NuxtIcon name="location"></NuxtIcon>
                            </div>
                            <div class="r-area">
                                <span>{{ transl(p.area) }}</span>
                                <NuxtIcon name="map"></NuxtIcon>
                            </div>
                        </div>
                    </div>
                    <div class="lou-box">
                        <div class="l-t">
                            <div class="t-cover" :style="{ backgroundImage: `url(${publicUrl(p.cover)})` }">
                                <div class="cover-sub">{{ transl(p.sub) }}</div>
                            </div>
                            <div class="t-zhanwei"></div>
                            <div class="t-r">
                                <div class="t-content">
                                    <div class="content-item" v-for="(j, index) in p.description" :key="index">{{ transl(j)
                                    }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="l-b">
                            <div class="l-b-in">
                                <div class="l-b-left"></div>
                                <div class="l-b-price">
                                    <div class="l-b-p1">
                                        {{ transl('均价') }}
                                    </div>
                                    <div class="l-b-p2">{{ p.price }}</div>
                                    <div class="l-b-p3">
                                        {{ transl('元') }}/m²
                                    </div>
                                </div>
                                <div class="l-b-enter">
                                    <NuxtIcon name="in"></NuxtIcon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </NuxtLink>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { publicUrl } from "@/utils/index"
import type { LouItem } from "@/api/interface/site"
import { reactive } from "vue";
import { LangStore } from "@/stores/modules/lang"
const { transl } = LangStore()
const list = reactive<LouItem[]>([
    {
        name: "鸿基·山水印象",
        address: "中山·“硅谷”科技城旁",
        area: "96-113m2 (1032-1215呎)",
        sub: "成熟生活配套 双景观楼王",
        description: [
            "家门即享繁华商圈",
            "一线江景GET！成熟商圈GET！",
            "10Min步行圈衣食住行一条龙",
            "30分钟直达港珠澳大桥"
        ],
        price: 6000,
        cover: "/img/lou1.jpg",
        id: 237,
    },
    {
        name: "蓝城·鹭岛香山小镇",
        address: "中山·神湾游艇会旁",
        area: "86-120m2 (925-1291呎)",
        sub: "国际生态休闲岛",
        description: [
            "岛上物业，宜居升值保障",
            "30分钟畅达九州港",
            "一线超凡江景，1.5公里奢华江景",
            "30分钟达港珠澳大桥人工岛"
        ],
        price: 6500,
        cover: "/img/lou2.jpg",
        id: 632,
    },
    {
        name: "华发观山水",
        address: "中山·港珠澳后花园",
        area: "79-119m2 (850-1280呎)",
        sub: "揽湖山景大盘",
        description: [
            "华发上市品牌,国内稳健房企代表",
            "12000m²商业区，生活配套一应",
            "俱全",
            "30分钟达港珠澳大桥人工岛"
        ],
        price: 5800,
        cover: "/img/lou5.jpg",
        id: 72,
    },
    {
        name: "骏璟峰·境樾",
        address: "中山·圣安高尔夫球场旁",
        area: "80-93m2 (860-1000呎)",
        sub: "拥有四重景观豪宅王",
        description: [
            "全无遮挡四重景观",
            "亚热带风管园林",
            "尊贵府邸星级入户大堂",
            "25分钟达港珠澳大桥人工岛"
        ],
        price: 11000,
        cover: "/img/lou4.jpg",
        id: 661,
    },
    {
        name: "雅居乐·星玥",
        address: "中山·城区中心政府旁",
        area: "86-126m2 (925-1356呎)",
        sub: "繁华城芯 实景现楼",
        description: [
            "雅居乐物业管理",
            "一门口楼巴接送往返港澳",
            "户户朝南宽阔三四房",
            "30分钟达港珠澳大桥人工岛"
        ],
        price: 6388,
        cover: "/img/lou3.jpg",
        id: 69,
    },
])
</script>
    
<style scoped lang="scss">
@import "./index.scss";
</style>